<template>
    <div id="cesiumContainer"></div>
</template>

<script>
    import * as Cesium from 'cesium/Cesium'

    export default {
        name: 'ModelAnimation',
        data() {
            return {}
        },
        mounted() {
            this.initCesium();
            this.addModel();
        },
        methods: {
            initCesium() {
                this.viewer = new Cesium.Viewer('cesiumContainer', {
                    animation: false,
                    baseLayerPicker: false,
                    fullscreenButton: false,
                    geocoder: false,
                    homeButton: false,
                    infoBox: true,
                    sceneModePicker: false,
                    navigationHelpButton: false,
                    scene3DOnly: true,
                    timeline: false,
                    selectionIndicator: false,//是否显示选取指示器组件
                    shouldAnimate: true,     //自动播放动画控件
                    shadows: true,//是否显示光照投射的阴影
                    terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,//地质接收阴影
                    sceneMode: Cesium.SceneMode.SCENE3D,
                    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                        url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer?f=jsapi"
                    }),
                });
                this.viewer._cesiumWidget._creditContainer.style.display = "none";  //	去除版权信息
            },
            addModel() {
                const origin = Cesium.Cartesian3.fromDegrees(105.0, 40.0, 0.0);
                const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
                const model = this.viewer.scene.primitives.add(Cesium.Model.fromGltf({
                    url: 'http://localhost:8888/model/models/gltf/Xbot.glb',
                    show: true,                     // default
                    modelMatrix: modelMatrix,
                    scale: 1000000.0,                   // double size
                    minimumPixelSize: 128,          // never smaller than 128 pixels
                    maximumScale: 200000000,             // never larger than 20000 * model size (overrides minimumPixelSize)
                    runAnimations: true,//指定是否应启动模型中指定的glTF动画
                    clampAnimations: true,//指定glTF动画是否应在没有关键帧的持续时间内保持最后一个姿势
                    //lightColor:new Cesium.Cartesian3(1.0,0.0,0.0)
                }));
                //模型动画帧开始时间
                let startTime = Cesium.JulianDate.fromDate(new Date());
                //模型动画停止时间
                let stopTime = Cesium.JulianDate.addMinutes(startTime, 1, new Cesium.JulianDate())
                console.log(startTime)
                console.log(stopTime)

                model.readyPromise.then((model) => {
                    let activeAnimations = model.activeAnimations;
                    //添加模型多有动画帧
                    model.activeAnimations.addAll({
                        multiplier: 1,        //设置动画播放的倍率，大于1加速，小于1减速                // Play at half-speed
                        loop: Cesium.ModelAnimationLoop.REPEAT, //动画帧循环模式
                        removeOnStop: true,//动画帧运行完移除动画
                        reverse: true,//反向播放动画
                        delay: 10,//动画帧延迟10秒
                        animationTime: (duration, seconds) => {//计算动画帧的时间函数
                            console.log(duration,seconds)
                            return seconds / duration + 0.5;
                        },
                        startTime: startTime,//动画开始时间
                        stopTime: stopTime//动画结束时间
                    });
                    let animation = activeAnimations.get(0);//从动画帧集合中获取到动画帧
                    //动画开始播放的时间
                    animation.start.addEventListener(function (model, animation) {
                        console.log(`Animation started: ${animation.name}`);
                    });
                    //动画帧停止时间
                    animation.stop.addEventListener(function (model, animation) {
                        console.log(`Animation stopped: ${animation.name}`);
                    });
                    //动画更新的时间
                    animation.update.addEventListener(function (model, animation, time) {
                        console.log(`Animation updated: ${animation.name}. glTF animation time: ${time}`);
                    });
                });
                this.viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(105.0, 40.0, 1000.0), // 设置位置
                    orientation: {
                        heading: Cesium.Math.toRadians(20.0), // 方向
                        pitch: Cesium.Math.toRadians(-90.0),// 倾斜角度
                        roll: 0
                    }
                })

            }
        },
        animationTime1(duration) {
            return Date.now() / 1000 / duration;
        },
        animationTime2(duration, seconds) {
            return seconds / duration + 0.5;
        }

    }
</script>

